import { Button, Divider, Dropdown, Form, Icon, Menu, message, Avatar, Table, PageHeader, Popover, Tooltip, Breadcrumb } from 'antd';
import React, { useState, useRef, useEffect, useContext } from 'react';
import { DIR_OBJECT, PATH_LENGTH } from '@/generic/ConfigParams';
import styles from "./index.less";

export const VDISK_NAME = localStorage.getItem("authority");

const createBreadcrumb = (path = "/", locationName, onBreItemClick, isMobile, vdisk) => {
    console.log("===>> locationName", locationName, path)
    let routes = path == "/" ? null : [];
    if (vdisk() == 'usr' && routes) {  // 消除usr带来的影响
        path = path.split('/').slice(1).join('/');
    }
    if (routes instanceof Array) {
        routes = [];
        let temp_path = vdisk() == 'usr' ? `/${VDISK_NAME}` : '';
        let _path = path.split("/").slice(1); // 当目录嵌套过深时，for循环的次数会影响性能 | 可定义一个数组来记录path
        let bre_length = _path.length
        if (bre_length > 0) {

            let last_item = _path.pop();  // 最后一个不加点击事件
            // console.log("==>> first_last_path", _path, last_item, bre_length)
            if (!isMobile) {
                _path.forEach((item, i) => {

                    let item_path = `${temp_path}/${item}`;
                    temp_path = item_path;
                    routes.push(
                        <>
                            <Breadcrumb.Item href={item_path} key={i + 1}
                                onClick={(e) => onBreItemClick(e, `${item_path}`)}>
                                {item}
                            </Breadcrumb.Item>
                        </>
                    );
                });
                routes = [
                    <Breadcrumb.Item key={0} href="" onClick={onBreItemClick}>{locationName}</Breadcrumb.Item>,
                ].concat(
                    routes,
                    [
                        <Breadcrumb.Item key={bre_length + 1}>
                            <Icon type={DIR_OBJECT.openIcon} theme={DIR_OBJECT.theme} style={{ color: DIR_OBJECT.color }} />
                            <span>{last_item}</span>
                        </Breadcrumb.Item>
                    ],
                );
            }
            else{
                routes = [
                    <Breadcrumb.Item>
                        <Icon type={DIR_OBJECT.openIcon} theme={DIR_OBJECT.theme} style={{ color: DIR_OBJECT.color }} />
                        <span>{last_item}</span>
                    </Breadcrumb.Item>
                ];
            }
        }
    }

    return (routes && routes.length > 0) ? <Breadcrumb>{routes}</Breadcrumb> : locationName;
}

const getBackIcon = (backIcon, breadcrumbPath) =>{
    switch (breadcrumbPath) {
        case '/':
            return "";
        case `/${VDISK_NAME}`:
            return "";
        case '':
            return "";
    
        default:
            return backIcon || <Icon type="arrow-up" />;
    }
}

const BreadcrumbHeader = props => {

    const { vdisk, className, isMobile, currentPath: breadcrumbPath, locationName, onBack, backIcon, extraRender, onItemClick, tableRefresh, setRowSize, setListDisplay, listDisplay } = props;

    const [subTitle, setSubTitle] = useState("");

    useEffect(() =>{
        setSubTitle(createBreadcrumb(breadcrumbPath, locationName, onItemClick, isMobile, vdisk));
    }, [breadcrumbPath])

    const rowSizeMenu = (
        <Menu onClick={(params) => setRowSize(params.key)}>
            <Menu.Item key="default">默认</Menu.Item>
            <Menu.Item key="middle">中等</Menu.Item>
            <Menu.Item key="small">紧凑</Menu.Item>
        </Menu>
    );

    const colDisplay = (
        <div className={styles.colDisplay}>
            <Tooltip key="0" title="刷新">
                <Icon type="reload" onClick={tableRefresh} />
            </Tooltip>
            <Divider key="1" type="vertical" />
            {
                listDisplay && 
                <>
                    <Dropdown key="2" overlay={rowSizeMenu} placement="bottomRight">
                        <Tooltip title="行距">
                            <Icon type="column-height" />
                        </Tooltip>
                    </Dropdown>
                    <Divider key="3" type="vertical" />
                </>
            }
            <Tooltip key="4" title="布局" onClick={setListDisplay}>
                <Icon type="appstore" />
            </Tooltip>
        </div>
    );

    return (
        <PageHeader 
            className={className}
            subTitle={subTitle}
            onBack={onBack}
            backIcon={getBackIcon(backIcon, breadcrumbPath)}
            extra={!isMobile ? (extraRender || colDisplay) : ""}
        />
    );
}

export default BreadcrumbHeader;